<template>
    <div id="map3D">
        <!-- <div class="animate-maker-border"> 
    </div> -->
    </div>
</template>

<script>
// import Map3D from "../lib/map3D.js";

// export default {
//     name: "webGIS",
//     props: {
//         map: {
//             type: Object,
//             default: () => ({}),
//         },
//     },
//     data() {
//         return {
//             position: [106, 125],
//             title: "标题",
//             id: "0",
//         };
//     },

//     mounted() {
//         this.$nextTick(() => {
//             let map = new Map3D("map3D");
//             console.log("map", map);
//             this.$emit("update:map", map);
//         });
//     },

//     methods: {},
// };
</script>

<style lang="scss" >
@import "../style.css";
#map3D {
    width: 100%;
    height: 100%;
}
.cesiumPopWrap {
    background-color: #fff;
}
.divlabel-container,
.divlabel-container::before,
.divlabel-container::after {
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
    cursor: pointer;
}

@keyframes clipMe {
    0%,
    100% {
        clip: rect(0px, 170px, 2px, 0px);
    }
    25% {
        clip: rect(0px, 2px, 47px, 0px);
    }
    50% {
        clip: rect(45px, 170px, 47px, 0px);
    }
    75% {
        clip: rect(0px, 170px, 47px, 45px);
    }
}
.animate-marker__text {
    color: #fff;
    font-size: 14px;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    user-select: none;
    cursor: pointer;
    background: rgba(0, 173, 181, 0.32);
}
</style>